<template>
  <div class="app-container">
    <div class="header">
      <el-input style="width: 300px;" v-model="ordersListForm.memo" size="mini" placeholder="输入关键字搜索"
        @change="ordersSearch" @input="checkVal">
        <i slot="suffix" class="el-icon-search"></i>
      </el-input>
    </div>
    <!-- 订单详情 -->
    <el-dialog title="订单详情" :visible.sync="showOrdersDetail" :close-on-click-modal="false"
      @close="showOrdersDetail = false">
      <el-table :data="ordersDetail" style="width: 100%;" stripe :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column label="商品信息">
          <el-table-column label="款式名称" width="120" prop="styleName">
            <template slot-scope="scope">
              <div>{{ scope.row.styleName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="价格信息" width="130" prop="costMessage">

            <template slot-scope="scope">
              <div>{{ scope.row.costMessage }}</div>
            </template>
          </el-table-column>
          <el-table-column label="单价" width="130" prop="costPrice">

            <template slot-scope="scope">
              <div>{{ scope.row.costPrice }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="订单信息">
          <el-table-column label="数量" width="120" prop="waresNumber">

            <template slot-scope="scope">
              <div>{{ scope.row.waresNumber }}</div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="删除">
          <el-table-column label="删除者" width="120">

            <template slot-scope="scope">
              <div>{{ scope.row.removeAdmin }}</div>
            </template>
          </el-table-column>
          <el-table-column label="删除理由">

            <template slot-scope="scope">
              <div>{{ scope.row.removeMemo }}</div>
            </template>
          </el-table-column>
        </el-table-column>

      </el-table>
    </el-dialog>
    <div class="content">
      <!-- 订单列表 -->
      <el-table :data="ordersList" style="width: 100%;" stripe :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column label="用户信息">
          <el-table-column label="下单用户" width="80" prop="userName">

            <template slot-scope="scope">
              <div>{{ scope.row.usersName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" width="130" prop="userPhone">

            <template slot-scope="scope">
              <div>{{ scope.row.userPhone }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="订单信息">
          <el-table-column label="订单号" width="250" prop="ordersId">

            <template slot-scope="scope">
              <div>{{ scope.row.ordersId }}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单价格" width="120" prop="ordersPrice">

            <template slot-scope="scope">
              <div>{{ scope.row.ordersPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单备注" width="140" prop="ordersMemo">

            <template slot-scope="scope">
              <div>{{ scope.row.ordersMemo }}</div>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" width="160" sortable prop="date">

            <template slot-scope="scope">
              <div>{{ scope.row.saveTime }}</div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="删除">
          <el-table-column label="删除者" width="120">

            <template slot-scope="scope">
              <div>{{ scope.row.removeAdmin }}</div>
            </template>
          </el-table-column>
          <el-table-column label="删除理由">

            <template slot-scope="scope">
              <div>{{ scope.row.removeMemo }}</div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="操作">
          <el-table-column label="查看">

            <template slot-scope="scope">
              <!-- @click="showEditBrands(scope.row.id)" -->
              <el-button type="text" size="small" @click="showOrdersDetailTable(scope.row.id)">查看订单详情</el-button>
            </template>
          </el-table-column>
          <el-table-column label="订单状态">

            <template slot-scope="scope">
              <!-- <el-popover placement="top-start" width="250" v-model="visible" :ref="`popover-${scope.$index}`">
                <p>确定操作该订单进入下一步吗？</p>
                <div style="text-align: right; margin: 0;">
                  <el-button size="mini" type="text" @click="cancel">取消</el-button>
                  <el-button type="primary" size="mini" @click="ok">确定</el-button>
                </div>
              </el-popover>
              <el-button slot="reference" type="danger" size="mini" v-if="scope.row.ordersState == 0"
                @click="updateOrdersStateHandle(scope.row.ordersState, scope.$index)">未支付</el-button>
              <el-button slot="reference" type="warning" size="mini" v-if="scope.row.ordersState == 1"
                @click="updateOrdersStateHandle(scope.row.ordersState, scope.$index)">拣货中</el-button>
              <el-button slot="reference" type="primary" size="mini" v-if="scope.row.ordersState == 2"
                @click="updateOrdersStateHandle(scope.row.ordersState, scope.$index)">配送中</el-button>
              <el-button slot="reference" type="success" size="mini" v-if="scope.row.ordersState == 3"
                @click="updateOrdersStateHandle(scope.row.ordersState, scope.$index)">已完成</el-button> -->
              <el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" title="确定让该订单进入下一步吗？"
                @onConfirm="confirm" @onCancel="cancel">
                <el-button slot="reference" type="danger" disabled size="mini" v-if="scope.row.ordersState == 0"
                  @click="updateOrdersStateHandle(scope.row.ordersState, scope.row)">待支付</el-button>
                <el-button slot="reference" type="primary" size="mini" v-if="scope.row.ordersState == 1"
                  @click="updateOrdersStateHandle(scope.row.ordersState, scope.row)">拣货中</el-button>
                <el-button slot="reference" type="success" size="mini" v-if="scope.row.ordersState == 2"
                  @click="updateOrdersStateHandle(scope.row.ordersState, scope.row)">配送中</el-button>
                <el-button slot="reference" type="info" disabled size="mini" v-if="scope.row.ordersState == 3"
                  @click="updateOrdersStateHandle(scope.row.ordersState, scope.row)">已完成</el-button> -->
              </el-popconfirm>
            </template>
          </el-table-column>
          <el-table-column label="停止 / 恢复">

            <template slot-scope="scope">
              <el-switch v-model="scope.row.isDelete" active-color="#66b1ff" inactive-color="#adadad" ref="switch"
                @change="switchChange($event, scope.$index, scope.row)" :active-value="0" :inactive-value="1">
              </el-switch>
            </template>
          </el-table-column>
        </el-table-column>

      </el-table>
      <el-pagination @size-change="ordersListSizeChange" @current-change="ordersListCurrentChange"
        :page-size="ordersListForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
        :total="ordersListTotal" style="margin-top: 20px;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import utils from '@/utils/checkLogin'
import { getOrdersDetail, getOrdersList, removeOrders, restoreOrders, updateOrdersState } from '../../api/api'
import { jwtDecode } from 'jwt-decode'
export default {
  data() {
    return {
      ordersList: [],
      ordersListForm: {
        memo: '',
        size: 10,
        page: 1
      },
      showOrdersDetail: false,
      ordersDetail: [],
      ordersListTotal: 0,
      obj: {
        ordersId: null
      }
    }
  },
  methods: {
    getOrdersListData() {
      getOrdersList(this.ordersListForm).then((res) => {
        if (res.code == 200) {
          console.log('订单列表', res)
          this.ordersList = res.data
          this.ordersTotal = res.total
        }
      })
    },
    showOrdersDetailTable(ordersId) {
      console.log('订单详情', ordersId);
      this.showOrdersDetail = true
      let obj = {
        ordersId
      }
      getOrdersDetail(obj).then((res) => {
        if (res.code == 200) {
          console.log('订单详情', res)
          this.ordersDetail = res.data
        }
      })
    },
    ordersListSizeChange(e) {
      this.ordersListForm.size = e
      this.getOrdersListData()
    },
    ordersListCurrentChange(e) {
      this.ordersListForm.page = e
      this.getOrdersListData()
    },
    ordersSearch() {
      this.getOrdersListData()
    },
    // 当搜索框的值为空时，显示全部分类
    checkVal() {
      if (this.ordersListForm.memo == '') {
        this.getOrdersListData()
      }
    },
    switchChange($event, index, row) {
      // 停止订单
      if ($event) {
        let removeOrdersForm = {
          ordersId: row.id,
        }
        this.$confirm('进行停止操作，是否永久停止该订单?', '停止提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$prompt('请输入停止理由', '删除提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            removeOrdersForm.removeMemo = value
            removeOrders(removeOrdersForm).then((res) => {
              if (res.code == 200) {
                console.log('停止成功', res);
                this.$message({
                  type: 'success',
                  message: '停止订单成功',
                  duration: 2000
                })
                setTimeout(() => {
                  this.getOrdersListData()
                }, 1000)
              } else {
                this.$message({
                  type: 'error',
                  message: '停止订单失败',
                  duration: 2000
                })
              }
            })

          }).catch(() => {
            this.ordersList[index].isDelete = 0
            this.getOrdersListData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          this.ordersList[index].isDelete = 0
          this.getOrdersListData()
        })
      } else {
        // 恢复
        console.log('已恢复');
        let noRemoveOrdersForm = {
          ordersId: row.id,
        }
        restoreOrders(noRemoveOrdersForm).then((res) => {
          if (res.code == 200) {
            console.log('恢复成功', res);
            this.$message({
              type: 'success',
              message: '恢复订单成功',
              duration: 2000
            })
            setTimeout(() => {
              this.getOrdersListData()
            }, 1000)
          } else {
            this.$message({
              type: 'error',
              message: '恢复订单失败',
              duration: 2000
            })
          }
        })
      }
    },
    updateOrdersStateHandle(ordersState, row) {
      this.obj.ordersId = row.id
    },
    confirm() {
      updateOrdersState(this.obj).then((res) => {
        if (res.code == 200) {
          console.log('更新订单状态', res)
          this.$message({
            type: 'success',
            message: '更新状态成功',
            duration: 2000
          })
          this.getOrdersListData()
        }
      })
    },
    cancel() {
      console.log('取消');
    }
  },
  created() {
    utils.checkLogin()
    this.getOrdersListData()
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 30px;

  .header {
    align-items: center;
    display: flex;
    margin-bottom: 20px;

    .el-icon-search {
      cursor: pointer;
      margin-right: 4px;
      margin-top: 8px;
    }

  }

  .content {
    text-align: center;
  }

  .customWidth {
    width: 75%;
  }

  @media (max-width: 768px) {
    .kub-mobileWidth {
      width: 98%;
    }
  }
}
</style>